<template>
  <div class="layout-main">
    <img
      class="layout-banner"
      style="height: 400px"
      src="../assets/images/bg1.jpg"
      alt=""
    />

    <div id="container"></div>

    <div class="relation-wrapper">
      <div class="left-layout">
        <h5>联系我们</h5>
        <p>
          某某公司液晶显示产品覆盖传媒、商业、安防、教育等多个领域。某某公司拥有一批从事智能显示设备、物联网设备研发的工程师及生产线，更好地保障了公司多媒体液晶显示设备的优良性能和高品质。为了给客户提供更好的产品和服务，某某公司不断拓展和完善营销渠道，已建成行业内较完善的营销渠道服务网络。
        </p>
        <p>PHONE : 020-000-0000</p>
        <p>E-MAIL : xxx@.co.m</p>
        <p>E-MAIL : xxx@.co.m</p>
        <p>公司地址 : XXX省XXX市XXX县XXX路XXX号</p>
      </div>
      <div class="right-layout">
        <el-form
          label-position="top"
          label-width="auto"
          :model="formLabelAlign"
          style="max-width: 400px; margin-left: auto; margin-top: auto"
        >
          <el-form-item label="姓名">
            <el-input v-model="formLabelAlign.name" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="formLabelAlign.region" />
          </el-form-item>
          <el-form-item label="留言">
            <el-input v-model="formLabelAlign.type" type="textarea" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" size="large" @click="submitForm">
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
let map = null;

const formLabelAlign = reactive({
  name: "",
  region: "",
  type: "",
});

onMounted(() => {
  AMapLoader.load({
    key: "c64f41fb8f7a387827e22c3060092007", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 14, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });
    })
    .catch((e) => {
      console.log(e);
    });
});

function submitForm() {}

onUnmounted(() => {
  map?.destroy();
});
</script>
<style lang="scss" scoped>
.layout-main {
  width: 100%;
}

#container {
  margin-top: 70px;
  width: calc(100% - 200px);
  margin-left: 100px;
  height: 500px;
}

.relation-wrapper {
  margin-top: 70px;
  box-sizing: border-box;
  padding: 100px 200px;
  background: #fafafa;
  display: flex;
  align-items: flex-end;

  .left-layout {
    flex: 1;

    h5 {
      font-size: 34px;
      margin-bottom: 14px;
    }

    p {
      color: #999;
      font-size: 14px;
      line-height: 28px;
      margin-bottom: 8px;
    }
  }

  .right-layout {
    flex: 1;
    box-sizing: border-box;
  }
}
</style>
